<template>
  <el-upload
    class="avatar-uploader"
    :action="uploadUrl"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
  >
    <el-image v-if="avatar" :src="imgBaseUrl + '/' + avatar" class="avatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'

// 定义组件名称
defineOptions({
  name: 'AvatarUploader'
})

// 定义props
const props = defineProps({
  uploadUrl: {
    type: String,
    required: true
  },
  imgBaseUrl: {
    type: String,
    required: true
  },
  avatar: {
    type: String,
    default: ''
  }
})

// 定义emits
const emit = defineEmits(['upload-success'])

// 响应式数据
const resData = ref('')

// 处理上传成功
const handleSuccess = (res, file) => {
  // 把res传给父组件
  resData.value = res.data
  emit('upload-success', res.data)
}

// 上传前检查
const beforeUpload = (file) => {
  const isImage = file.type.match('image/jpeg|image/png')
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isImage) {
    ElMessage.error('上传头像图片只能是 JPG 或 PNG 格式!')
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 2MB!')
  }
  return isImage && isLt2M
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader-icon {
  font-size: 28px;
  border: 1.5px dashed #d9d9d9;
  background-color: rgba(255, 255, 255, 0.479);
  border-radius: 6px;
  color: #006aff;
  width: 178px;
  height: 178px;
  line-height: 178px;
  transition: 0.5s;
  text-align: center;
  border-radius: 50%;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
  border-radius: 50%;
}
</style>
